<template>
  <div id="PgmBox">
    <el-card>
      <el-card shadow="never">
        <div slot="header"  class="clearfix" v-if="crud.props.searchToggle">
          <!-- 搜索 -->
          <el-select v-model="query.channel_id" placeholder="请选择频道" style="width: 130px;">
            <el-option  v-for="(item, index) in channelInfo" :label="item.channel_name" :value="item.id"  :key="index" ></el-option>
          </el-select>
          <el-input v-model="query.seg_name" clearable placeholder="输入节目时段名称" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
          <rrOperation />
        </div>
        <crudOperation :permission="permission" />
        <!--表单组件-->
        <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
          <el-form ref="form" inline :model="form" :rules="rules" label-width="120px">
            <el-form-item label="节目时段名称" prop="seg_name">
              <el-input v-model="form.seg_name" style="width: 300px;" />
            </el-form-item>
            <el-form-item label="频道类型" prop="channel_id">
              <el-select v-model="form.channel_id" class="elInputS" placeholder="请选择频道">
                <el-option  v-for="(item, index) in channelInfo" :label="item.channel_name" :value="item.id"  :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="节目开始时间" prop="s_time">
              <el-time-picker v-model="form.s_time" format = 'HH:mm:ss' value-format = 'HH:mm:ss' style="width: 300px;"></el-time-picker>
            </el-form-item>
            <el-form-item label="节目结束时间" prop="e_time">
              <el-time-picker v-model="form.e_time" format = 'HH:mm:ss' value-format = 'HH:mm:ss' style="width: 300px;"></el-time-picker>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="crud.cancelCU">取消</el-button>
            <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
          </div>
        </el-dialog>

        <!-- 列表区域 -->
        <el-table
          ref="table"
          v-loading="crud.loading"
          lazy
          :data="crud.data"
          border
          stripe
          @select="crud.selectChange"
          @select-all="crud.selectAllChange"
          @selection-change="crud.selectionChangeHandler"
          style="width: 100%;">
          <el-table-column :selectable="checkboxT" type="selection" width="55" />
          <el-table-column prop="pgm_seq_id" label="序号" width="60"></el-table-column>
          <el-table-column prop="seg_name" label="节目时段名称"></el-table-column>
          <el-table-column prop="channel_name" label="所属频道"></el-table-column>
          <el-table-column prop="s_time" label="开始时间"></el-table-column>
          <el-table-column prop="e_time" label="结束时间"></el-table-column>
          <el-table-column v-permission="['admin','pgmseq:edit','pgmseq:del']" label="操作" width="130px" align="center" fixed="right">
            <template slot-scope="scope">
              <udOperation
                :data="scope.row"
                :permission="permission"
                :disabled-dle="scope.row.pgm_seq_id === 0"
                msg="确定删除吗,此操作不能撤销！"
              />
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination />
      </el-card>
    </el-card>
  </div>
</template>

<script>
import CRUD, { presenter, header, form, crud } from '@/components/Crud/crud'
import crudPgmseq from '@/api/program/pgmseq.js' // 引入当前栏目的后端api

// 引入已封装好的增删改查相关组件
import rrOperation from '@/components/Crud/RrOperation.vue' // 搜索查询组件
import crudOperation from '@/components/Crud/CrudOperation.vue' // 列表顶部功能区域组件
import pagination from '@/components/Crud/Pagination.vue' // 分页组件
import udOperation from '@/components/Crud/UD.operation' // 列表操作列组件

// 配置表单字段， 并设置字段初始值
const defaultForm = { pgm_seq_id: null, seg_name: null, channel_name: '暂无', s_time: new Date(2020, 1, 2, 9, 0), e_time: new Date(2020, 1, 2, 9, 0) }
export default {
  name: 'Device',
  components: { rrOperation, crudOperation, pagination, udOperation },
  cruds() { // 该方法，返回当前组件配置初始化后的实例对象
    return CRUD({ idField: 'pgm_seq_id', title: '节目时段设置', url: 'program/pgmseq', crudMethod: { ...crudPgmseq } })
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  data() {
    return {
      /* 设置页面权限 */
      permission: {
        add: ['admin', 'pgmseq::add'],
        edit: ['admin', 'pgmseq::edit'],
        del: ['admin', 'pgmseq::del']
      },
      // 表单验证规则
      rules: {},
      // 频道详情配置数组
      channelInfo: []
    }
  },

  created() {
    this.crud.optShow.download = false // 隐藏 导出按钮
    this.getChannelList()
  },
  methods: {
    checkboxT(row, rowIndex) {
      return row.id !== false
    },
    // 新增与编辑提交前的操作
    [CRUD.HOOK.afterToCU](crud, form) {
      console.log(form, 'beforSubmit')
    },
    async getChannelList() {
      const { data: res } = await this.$http.get('Program/getChannelList', {
      })
      if (res.meta.status !== 200) {
        return this.$message.error('获取频道列表失败！')
      }
      this.channelInfo = res.data.list
    }
  }
}
</script>

<style lang="less">
  #PgmBox .el-card__header {
    background-color: #fff;
  }
  .operator {
    float: right;
    display: inline-block;
    margin-left: 20px;
  }
</style>
